
//import all the plugin you need
const path = require('path'),  //import path
  webpack = require('webpack'), //import webpack
  uglifyjs = require('uglifyjs-webpack-plugin'),
  htmlWebpackPlugin = require('html-webpack-plugin'),
  autoprefixer = require('autoprefixer'),
  { CleanWebpackPlugin } = require('clean-webpack-plugin');

const config = {
  mode: 'production', //envirement development / production
  entry: { //入口
    index: path.resolve(__dirname, './src/js/index.js'), //前面一定要是index 
    detail: path.resolve(__dirname, './src/js/detail.js'),
    cart: path.resolve(__dirname, './src/js/cart.js')
  },
  output: {
    // path
    path: path.resolve(__dirname + '/dist'),  //这里是拼接的字符串路径+
    filename: "js/[name]-[hash].js"
  },
  module: {
    rules: [
      //js
      {
        // something to handle
        test: /\.js$/, //regexp
        loader: 'babel-loader',
        exclude: path.resolve(__dirname, 'node_modules'), //不编译此目录下的js
        query: {
          "presets": ["latest"]
        }
      },
      //tpl
      {
        test: /\.tpl$/,
        loader: 'ejs-loader'
      },
      //css
      {
        test: /\.css$/,
        use: [ //more than one loader should use "use"
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [autoprefixer('last 5 versions')];
              }
            }
          }

        ]
      },
      // sass
      {
        test: /\.scss$/,
        use: [ //从下往上execu
          //more than one loader should use "use"
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [autoprefixer('last 5 versions')];
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      // img
      {
        test: /\.(png|jpg|jpeg|gif|ico)$/i,
        loader: [
          'url-loader?limit=1024&name=img/[name]-[hash:16].[ext]&esModule=false', //1024kb以下，name 原名，hash:16 16位哈希字符串 ext后缀名
          'image-webpack-loader'
        ]
      }
    ]
  },

  //插件配置
  plugins: [
    new uglifyjs(), //压缩js
    new htmlWebpackPlugin({
      minify: {   //最小化
        removeComments: true, //去注释
        collapseWhitespace: true, //去空白
      },
      filename: 'index.html',
      template: path.resolve(__dirname, 'src/index.html'),
      title: '商品列表',
      excludeChunks: ['node_modules'],
      chunks: ['index'],
      hash: true, //hope has a hash in front of 
    }),
    new htmlWebpackPlugin({
      minify: {  
        removeComments: true, //去注释
        collapseWhitespace: true, //去空白
      },
      filename: 'detail.html',
      template: path.resolve(__dirname, 'src/detail.html'),
      title: '商品列表',
      excludeChunks: ['node_modules'],
      chunks: ['detail'],
      hash: true, //hope has a hash in front of 
    }),
    new htmlWebpackPlugin({
      minify: {  
        removeComments: true, //去注释
        collapseWhitespace: true, //去空白
      },
      filename: 'cart.html',
      template: path.resolve(__dirname, 'src/cart.html'),
      title: '商品列表',
      excludeChunks: ['node_modules'],
      chunks: ['cart'],
      hash: true, //hope has a hash in front of 
    }),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [
        //'**/*', '!scripts','!./scripts/*', '!css', '!fonts',
      path.resolve(__dirname, 'dist/js'),
      path.resolve(__dirname, 'dist/img'),
      path.resolve(__dirname, 'dist/index.html'),
      path.resolve(__dirname, 'dist/detial.html'),
      path.resolve(__dirname, 'dist/cart.html')
    ],
      //exclude some files , "!" means that some folder or files no delete
      // '**/*' , should be in the config
      
    })
  ],

  devServer: {
    watchOptions: {
      ignored: /node_modules/
    },
    host: 'localhost',
    port: 3300
  }
}

module.exports = config;